import React, { Component } from "react";
import { Card, Button, Table, message, Input, Tree } from "antd";

import { reqRoleList } from "../../api";
import Modal from "antd/lib/modal/Modal";

export default class Role extends Component {
  //state
  state = {
    roleList: [],
    disabled: true,
    _id: "",
    visible: false,
    name: "",
    menus: [],
  };

  //获取角色列表
  getRoleList = async () => {
    const res = await reqRoleList();
    if (res.status !== 0) {
      message.error("获取角色列表失败");
    }
    this.setState({
      roleList: res.data,
    });
  };
  //初始化权限列表
  initMenus = () => {
    this.menuList = [
      {
        title: "首页",
        key: "/home",
      },
      {
        title: "商品",
        key: "/pro",
        children: [
          {
            title: "品类管理",
            key: "/pro/category",
          },
          {
            title: "商品管理",
            key: "/pro/product",
          },
        ],
      },
      {
        title: "用户管理",
        key: "/user",
      },
      {
        title: "角色管理",
        key: "/role",
      },
      {
        title: "图形图表",
        key: "/graph",
        children: [
          {
            title: "柱形图",
            key: "/graph/bar",
          },
          {
            title: "折线图",
            key: "/graph/line",
          },
          {
            title: "饼图",
            key: "/graph/pie",
          },
        ],
      },
    ];
  };
  //设置角色权限
  handleSetRole = () => {
    this.setState({ visible: true });
  };
  //mount生命周期函数
  UNSAFE_componentWillMount() {
    this.getRoleList();
    this.tableConfig();
    this.initMenus();
  }
  //规整获得数组权限列表
  // deleExProps = (list)=> {
  //   let res = []
  //   const menuStand =  ["/admin", "/category"]
  //   list.forEach((item)=> {
  //     if (!item.children) {
  //       menuList
  //     }
  //    })
  // }
  //find 权限函数
  findMenus = async (id) => {
    let menus = [];
    this.state.roleList.forEach((item) => {
      if (item._id === id) {
        menus = item.menus;
        return;
      }
    });
    menus.forEach(function (item, index, arr) {
      if (item === "all") {
        arr.splice(index, 1);
      }
    });
    this.setState({
      menus: menus,
    });
  };
  //表格的配置项
  tableConfig = () => {
    //table列配置
    this.columns = [
      {
        title: "角色名称",
        dataIndex: "name",
      },
      {
        title: "创建时间",
        dataIndex: "create_time",
      },
      {
        title: "授权时间",
        dataIndex: "auth_time",
      },
      {
        title: "授权人",
        dataIndex: "auth_name",
      },
    ];

    //table每行选择配置
    this.rowSelection = {
      onChange: async (selectedRowKeys, selectedRows) => {
        await this.setState({
          disabled: false,
          _id: selectedRowKeys[0],
          name: selectedRows[0].name,
        });
        this.findMenus(this.state._id);
      },
    };
  };
  //
  handleOk = (e) => {
    this.setState({
      visible: false,
    });
  };

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  render() {
    //state
    const { roleList } = this.state;
    //table数据源
    this.data = roleList;
    //card题目配置
    const title = (
      <span>
        <Button type="primary" style={{ marginRight: "10px" }}>
          创建角色
        </Button>
        <Button
          type="primary"
          disabled={this.state.disabled}
          onClick={this.handleSetRole}
        >
          设置角色权限
        </Button>
      </span>
    );

    const treeData = this.menuList;
    // const onSelect = (selectedKeys, info) => {
    //   console.log("selected", selectedKeys, info);
    // };

    const onCheck = (checkedKeys, info) => {
      console.log("onCheck", checkedKeys, info);
    };
    return (
      <Card title={title}>
        <Modal
          visible={this.state.visible}
          title="设置角色权限"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <div style={{ display: "flex", alignItems: "center" }}>
            <span style={{ margin: "0 10px 0 25px" }}>角色名称:</span>{" "}
            <Input
              value={this.state.name}
              style={{ width: 320 }}
              disabled
            ></Input>
          </div>
          <Tree
            checkable
            defaultExpandedKeys={["/pro", "/graph"]}
            // defaultSelectedKeys={this.state.menus}
            defaultCheckedKeys={this.state.menus}
            // onSelect={onSelect}
            onCheck={onCheck}
            treeData={treeData}
          />
        </Modal>
        <Table
          rowKey="_id"
          bordered
          rowSelection={{
            type: "radio",
            ...this.rowSelection,
          }}
          columns={this.columns}
          dataSource={this.data}
        />
      </Card>
    );
  }
}
